<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <com-parent></com-parent>
  </div>
  <script src="./vue.js"></script>
  <script>

    // 父组件
    Vue.component('com-parent', {
      template: `
      <div class="parent"> 
          父组件 {{str}}
          <com-child @child-to-parent="handleFn"></com-child>
      </div>`,
      //  @child-to-parent="handleFn" || @child-to-parent="handleFn(event)"
      // 1. 给子组件绑定自定义事件 事件的名字：child-to-parent
      // 2. handleFn 触发事件的处理函数，如果是自定义事件 $event 代表是触发事件时候传参
      data () {
        return {
          str: ''
        }
      },
      methods: {
        handleFn ( msg ) {
          // 如果可以打印：子传父实现
          // console.log(msg)
          this.str = msg
        }
      }
    })

    // 子组件
    Vue.component('ComChild', {
      template: `<div class="child"> 子组件 <button @click="fn">子传父</button></div>`,
      data () {
        return {
          msg: 'CHILD DATA'
        }
      },
      methods: {
        fn () {
          // 子组件的msg数据  传递给父组件
          // 1. $emit 是vue实例提供的api函数
          // 2. 函数的作用：触发当前组件的自定义事件
          // 3. 参数1：自定义事件的名称
          // 4. 参数2：触发自定义事件的默认传参 
          this.$emit('child-to-parent', this.msg)
        }
      }
    })


    // 根实例
    new Vue({
      el: '#app'
    })
  </script>
</body>

</html>